<template>
  <nly-content-wrapper>
    <nly-content>
      <div style="margin-top: 40px;">
        <a-tabs @change="callback" v-model="tabKey">
          <a-tab-pane key="1" tab="基本设置" style="overflow-y: auto;height: calc(100vh - 190px);">
            <div style="width: 500px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="网站名称">
                  <a-input v-model="configInfo.name" style="width: 350px" />
                </a-form-item>
                <a-form-item label="网站LOGO">
                  <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="header"
                    @change="logoChange">
                    <img v-if="configInfo.logo" :src="configInfo.logo" width="108px" height="108px" alt="avatar" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
                <a-form-item label="图标LOGO">
                  <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="header"
                    @change="iconLogoChange">
                    <img v-if="configInfo.iconLogo" :src="configInfo.iconLogo" width="108px" height="108px" alt="avatar" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
                <a-form-item label="背景图">
                  <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="header"
                    @change="handleChange">
                    <img v-if="configInfo.backImgUrl" :src="configInfo.backImgUrl" width="108px" height="108px" alt="avatar" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
                <a-form-item label="背景色">
                  <a-input type="color" v-model="configInfo.backColor" style="width: 350px" />
                </a-form-item>
                <a-form-item label="版权信息">
                  <a-input v-model="configInfo.copy" style="width: 350px" />
                </a-form-item>
                <a-form-item label="客服电话">
                  <a-input v-model="configInfo.phone" style="width: 350px" />
                </a-form-item>
                <a-form-item label="备案序号">
                  <a-input v-model="configInfo.ipc" style="width: 350px" />
                </a-form-item>
                <a-form-item label="免费用户数">
                  <a-input v-model="configInfo.freeUsers" style="width: 350px" />
                </a-form-item>
                <a-form-item label="网站状态">
                  <a-radio-group name="radioGroup" :default-value="true" v-model="configInfo.status">
                    <a-radio :value="true">开启</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="关闭原因">
                  <a-textarea placeholder="请输入网站描述" :rows="5" v-model="configInfo.cause" />
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="SEO优化">
            <div style="width: 500px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="网站标题">
                  <a-input v-model="configInfo.title" style="width: 350px" />
                </a-form-item>
                <a-form-item label="网站关键词">
                  <a-input v-model="configInfo.keyWord" style="width: 350px" />
                </a-form-item>
                <a-form-item label="网站描述">
                  <a-textarea placeholder="请输入网站描述" v-model="configInfo.description" :rows="5" />
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="图片轮播">
            <nly-content-wrapper style="margin-left: -10px;">
              <nly-content>
                <div>
                  <a-button type="primary" class="crm-btn" @click="() => {imgVisible = true}">新增</a-button>
                  <a-button type="primary" class="crm-btn" @click="deleteImg">删除</a-button>
                </div>
                <a-table :columns="columns" :components="components" :data-source="data" bordered :pagination="false" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"></a-table>
              </nly-content>
            </nly-content-wrapper>
          </a-tab-pane>
          <a-tab-pane key="4" tab="短信设置">
            <div style="width: 550px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="* accessKeyId">
                  <a-input v-model="configInfo.accessKeyId" style="width: 350px" />
                </a-form-item>
                <a-form-item label="* accessSecret">
                  <a-input v-model="configInfo.accessSecret" style="width: 350px" />
                </a-form-item>
                <a-form-item label="* 签名">
                  <a-input v-model="configInfo.signName" style="width: 350px" />
                </a-form-item>
                <a-form-item label="* 模板CODE">
                  <a-input v-model="configInfo.templateCode" style="width: 350px" />
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="邮件设置">
            <div style="width: 500px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="邮件账号">
                  <a-input v-model="configInfo.emailAddress" style="width: 350px" />
                </a-form-item>
                <a-form-item label="邮件密码">
                  <a-input v-model="configInfo.emailPassword" style="width: 350px" />
                </a-form-item>
                <a-form-item label="邮件服务器">
                  <a-input v-model="configInfo.emailServer" style="width: 350px" />
                </a-form-item>
                <a-form-item label="邮件端口">
                  <a-input v-model="configInfo.emailPort" style="width: 350px" />
                </a-form-item>
                <a-form-item label="是否开启邮件">
                  <a-radio-group name="radioGroup" :default-value="true" v-model="configInfo.status">
                    <a-radio :value="true">开启</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="支付接口设置">
            <div style="width: 500px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="支付宝">
                  <a-radio-group name="radioGroup" :default-value="true" v-model="configInfo.alipayType">
                    <a-radio :value="true">开启</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="APPID">
                  <a-input v-model="configInfo.appId" style="width: 350px" />
                </a-form-item>
                <a-form-item label="同步回调地址">
                  <a-input v-model="configInfo.returnUrl" style="width: 350px" />
                </a-form-item>
                <a-form-item label="异步回调地址">
                  <a-input v-model="configInfo.notifyUrl" style="width: 350px" />
                </a-form-item>
                <a-form-item label="支付宝公钥">
                  <a-input v-model="configInfo.alipayPublicKey" style="width: 350px" />
                </a-form-item>
                <a-form-item label="支付宝私钥">
                  <a-input v-model="configInfo.merchantPrivateKey" style="width: 350px" />
                </a-form-item>
              </a-form>
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class" style="margin-top: 10px;">
                <a-form-item label="微信支付">
                  <a-radio-group name="wxRadioGroup" :default-value="true" v-model="configInfo.wxType">
                    <a-radio :value="true">开启</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="公众号appId">
                  <a-input v-model="configInfo.wxAppId" style="width: 350px" />
                </a-form-item>
                <a-form-item label="公众号秘钥">
                  <a-input v-model="configInfo.wxSecret" style="width: 350px" />
                </a-form-item>
                <a-form-item label="商户号">
                  <a-input v-model="configInfo.wxMuchId" style="width: 350px" />
                </a-form-item>
                <a-form-item label="商户秘钥">
                  <a-input v-model="configInfo.wxSecretKey" style="width: 350px" />
                </a-form-item>
                <a-form-item label="同步回调地址">
                  <a-input v-model="configInfo.wxReturnUrl" style="width: 350px" />
                </a-form-item>
                <a-form-item label="异步回调地址">
                  <a-input v-model="configInfo.wxNotifyUrl" style="width: 350px" />
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <!-- <a-tab-pane key="7" tab="微信设置">
            <div style="width: 500px;">
              
            </div>
          </a-tab-pane> -->
          <a-tab-pane key="8" tab="推广佣金设置">
            <div style="width: 600px;margin-left: 30px;">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                <a-form-item label="自销提成比例">
                  <a-input v-model="configInfo.firstReward" style="width: 150px" suffix="%" />
                  <div>推荐给客户购买后能拿到的提成比例。</div>
                </a-form-item>
                <a-form-item label="直属上级佣金比例">
                  <a-input v-model="configInfo.secondReward" style="width: 150px" suffix="%" />
                  <div>好友推荐客户购买后，好友的上级能拿到的佣金比例。</div>
                </a-form-item>
                <a-form-item label="间接上级佣金比例">
                  <a-input v-model="configInfo.thirdReward" style="width: 150px" suffix="%" />
                  <div>好友推荐客户购买后，好友的上级的上级能拿到的佣金比例。</div>
                </a-form-item>
                <a-form-item label="间接上级佣金比例">
                  <a-input v-model="configInfo.fourthReward" style="width: 150px" suffix="%" />
                  <div>好友推荐客户购买后，好友的上级的上级的上级能拿到的佣金比例。</div>
                </a-form-item>
                <a-form-item label="提现额度">
                  <a-input v-model="configInfo.withdrawalLimit" style="width: 150px" suffix="￥" />
                </a-form-item>
                <a-form-item label="是否开启推广奖励">
                  <a-radio-group name="radioGroup" :default-value="true" v-model="configInfo.isReward">
                    <a-radio :value="true">开启</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="推广方法">
                  <a-textarea placeholder="请输入推广方法" :rows="5" v-model="configInfo.extensionMethod" />
                </a-form-item>
                <a-form-item label="佣金规则">
                  <a-textarea placeholder="请输入佣金规则" :rows="5" v-model="configInfo.commissionRules" />
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="9" tab="分享设置" style="overflow-y: auto;height: calc(100vh - 190px);">
            <nly-content-wrapper style="margin-left: -10px;">
              <nly-content>
                <div>
                  <a-button type="primary" class="crm-btn" @click="() => {this.shareInfo={}, shareVisible = true}">新增</a-button>
                  <a-button type="primary" class="crm-btn" @click="updateShare">修改</a-button>
                  <a-button type="primary" class="crm-btn" @click="deleteShare">删除</a-button>
                  <a-button type="primary" class="crm-btn" @click="updateShareStatus(2)">停用</a-button>
                  <a-button type="primary" class="crm-btn" @click="updateShareStatus(0)">启用</a-button>
                </div>
                <a-table :columns="shareColumns" :components="components" :data-source="shareData" bordered :pagination="false" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"></a-table>
              </nly-content>
            </nly-content-wrapper>
          </a-tab-pane>
        </a-tabs>
        <div style="margin-left: 200px;">
          <a-button key="submit" type="primary" @click="saveConfigInfo">保存</a-button>
        </div>
      </div>
      <a-modal v-model="imgVisible" title="新增图片轮播" centered on-ok="handleok" width="800px">
        <div id="components-form-demo-advanced-search">
          <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 24 }" @submit="saveImage">
            <a-row :gutter="24">
              <a-col :span="20">
                <a-form-item label="图片上传">
                  <div>
                    <a-upload v-decorator="['imgUrl', { rules: [{ required: true, message: '请选择图片' }] }]" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                      :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="header" @change="imageChange">
                      <img v-if="imageUrl" :src="imageUrl" width="108px" height="108px" alt="avatar" />
                      <div v-else>
                        <a-icon :type="loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">Upload</div>
                      </div>
                    </a-upload>
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="20">
                <a-form-item label="描述">
                  <a-textarea placeholder="请输入图片描述" :rows="5" v-decorator="['remarks', { rules: [{ required: false, message: '图片描述' }] }]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="saveImage">保存</a-button>
          <a-button key="back" @click="() => {imgVisible = false}">关闭</a-button>
        </template>
      </a-modal>

      <a-modal v-model="shareVisible" title="新增分享" centered on-ok="handleok" width="800px">
        <div style="width: 800px;">
          <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 17 }" class="user-class">
            <a-form-item label="分享标题">
              <a-input v-model="shareInfo.shareTitle" style="width: 350px" />
            </a-form-item>
            <a-form-item label="分享图图片">
              <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="header"
                @change="shareImgChange">
                <img v-if="shareInfo.shareImg" :src="shareInfo.shareImg" width="108px" height="108px" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item label="分享描述">
              <a-textarea v-model="shareInfo.shareRemark" style="width: 350px" rows="5" />
            </a-form-item>
            <a-form-item label="分享链接">
              <a-input v-model="shareInfo.shareUrl" style="width: 350px" />
            </a-form-item>
            <a-form-item label="分享内容">
              <div style="width: 650px;">
                <ueditor :content.sync="shareInfo.shareContent"></ueditor>
              </div>
            </a-form-item>
          </a-form>
        </div>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="saveShare">保存</a-button>
          <a-button key="back" @click="() => {shareVisible = false}">关闭</a-button>
        </template>
      </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import {detail, save, saveImage, webImageList, deleteImg} from "@/api/system/config";
import {getList, save as saveShare, deleteShare} from "@/api/crm/share";
import { components } from "@/utils/antTableComponents";
import Vue from "vue";
import ueditor from '@/components/Ueditor/index';

export default {
  components: {
    ueditor
  },
  data () {
    const columns = [
      {
        title: "图片地址",
        dataIndex: "imgUrl",
        key: "imgUrl",
        width: 120
      },
      {
        title: "预览",
        dataIndex: "imgUrl",
        key: "imgurl",
        width: 120,
        customRender: (text, row, index) => {
          return <img src={text} width="60px" height="60px" />;
        }
      },
      {
        title: "宽度",
        dataIndex: "width",
        key: "width",
        width: 120
      },
      {
        title: "高度",
        dataIndex: "height",
        key: "height",
        width: 120
      },
      {
        title: "描述",
        dataIndex: "remarks",
        key: "remarks",
        width: 120
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        width: 120,
        customRender: (text, row, index) => {
          return text == 2 ? (
            <nly-badge bg-variant="danger">停用</nly-badge>
          ) : (
            <nly-badge bg-variant="success">正常</nly-badge>
          );
        }
      }
    ];

    const shareColumns = [
      {
        title: "分享标题",
        dataIndex: "shareTitle",
        key: "shareTitle",
        width: 120
      },
      // {
      //   title: "分享图片",
      //   dataIndex: "shareImg",
      //   key: "shareImg",
      //   width: 120,
      //   customRender: (text, row, index) => {
      //     return <img src={text} width="60px" height="60px" />;
      //   }
      // },
      {
        title: "分享描述",
        dataIndex: "shareRemark",
        key: "shareRemark",
        width: 120
      },
      // {
      //   title: "分享内容",
      //   dataIndex: "shareContent",
      //   key: "shareContent",
      //   width: 120
      // },
      {
        title: "分享次数",
        dataIndex: "shareCount",
        key: "shareCount",
        width: 120
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        width: 120,
        customRender: (text, row, index) => {
          return text != 0 ? (
            <nly-badge bg-variant="danger">停用</nly-badge>
          ) : (
            <nly-badge bg-variant="success">正常</nly-badge>
          );
        }
      }
    ];

    //表格 头部 可伸缩
    this.components = components(columns);
    return {
      loading: false,
      configInfo: {}, //基本信息
      form: this.$form.createForm(this, { name: "coordinated" }),
      header: { "Access-Token": Vue.ls.get("Access-Token") },
      tabKey: "1",
      columns,  //轮播图片
      data: [], //轮播图片数据列表
      imgVisible: false, //轮播图片弹窗
      shareColumns, //分享字段列表
      shareData: [], //分享数据列表
      shareVisible: false, //分享弹窗
      shareInfo: {},
      imageUrl: "",
      selectIds: [],
      selectedKeys: [],
      selectData: {}
    };
  },
  mounted () {
    this.getConfigInfo();
    this.webImageList();
    this.webShareList();
  },
  methods: {
    //基本信息
    getConfigInfo () {
      detail().then(response => {
        if (response.code == 200) {
          this.configInfo = { ...response.data };
          console.log(this.configInfo);
        }
      });
    },
    //tab切换
    callback (key) {
      console.log(key);
      this.tabKey = key;
      this.emptySelect();
    },
    emptySelect() {
      this.selectIds = [];
      this.selectedKeys = [];
    },
    //保存基本信息
    saveConfigInfo () {
      this.configInfo.createDate = null;
      this.configInfo.updateDate = null;
      save(this.configInfo).then(response => {
        if (response.code == 200) {
          this.$message.success("保存成功");
        }
      });
    },
    //保存轮播图
    saveImage (e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("开干......");
          values.imgUrl = this.imageUrl;
          saveImage(values).then(response => {
            if (response.code == 200) {
              this.$message.success("保存成功");
              this.imgVisible = false;
              this.webImageList();
            }
          });
        }
      });
    },
    //获取图片列表
    webImageList () {
      webImageList().then(response => {
        if (response.code == 200) {
          const { data } = response;
          const { records, total, current, size } = data;
          this.data = records;
        }
      });
    },
    //删除图片
    deleteImg () {
      deleteImg(this.selectIds).then(response => {
        if (response.code == 200) {
          this.$message.success("删除成功");
          this.webImageList();
        }
      });
    },
    //获取分享列表
    webShareList () {
      getList().then(response => {
        if (response.code == 200) {
          this.shareData = response.data;
        }
      });
    },
    //删除分享
    deleteShare () {
      if(this.selectIds.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      }

      deleteShare({id: this.selectIds[0]}).then(response => {
        if (response.code == 200) {
          this.$message.success("删除成功");
          this.webShareList();
          this.emptySelect();
        }
      });
    },
    //保存分享
    saveShare() {
      saveShare(this.shareInfo).then(response => {
        if (response.code == 200) {
          this.$message.success("保存成功");
          this.shareVisible = false;
          this.webShareList();
          this.shareInfo = {};
          this.emptySelect();
        }
      });
    },
    //修改分享
    updateShare() {
      if(this.selectIds.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      }

      this.shareVisible = true;
      this.shareInfo = this.selectData;
    },
    updateShareStatus(status) {
      if(this.selectIds.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      }

      this.shareInfo = {};
      this.shareInfo.id = this.selectIds[0];
      this.shareInfo.status = status;

      saveShare(this.shareInfo).then(response => {
        if (response.code == 200) {
          this.$message.success("保存成功");
          this.shareVisible = false;
          this.webShareList();
          this.shareInfo = {};
          this.emptySelect();
        }
      });
    },
    selection (keys, info) {
      this.selectedKeys = keys;
      const ids = new Array();
      info.forEach(function (val) {
        ids.push(val.id);
      });

      this.selectIds = ids;
      this.selectedKeys = keys;
      this.selectData = info[0];
    },

    //logo图片上传
    logoChange (info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        this.configInfo.logo = info.file.response.url;
        this.loading = false;
      }
    },
    //图标logo图片上传
    iconLogoChange (info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }

      if (info.file.status === "done") {
        this.configInfo.iconLogo = info.file.response.url;
        this.loading = false;
      }
    },
    //分享图片上传
    shareImgChange (info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        this.shareInfo.shareImg = info.file.response.url;
        this.loading = false;
      }
    },
    handleChange (info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        this.configInfo.backImgUrl = info.file.response.url;
        this.loading = false;
      }
    },
    imageChange (info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        this.imageUrl = info.file.response.url;
        this.loading = false;
      }
    },
    beforeUpload (file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("请选择图片文件!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片不能超过2MB!");
      }
      return isJpgOrPng && isLt2M;
    }
  }
};
</script>
<style scoped>
  .avatar-uploader > .ant-upload {
    width: 110px;
    height: 110px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .user-class .ant-form-item {
    margin-bottom: 2px !important;
  }
  .form-inline label {
    justify-content: left !important;
  }
  .form-inline > .col {
    margin-bottom: 1.5rem !important;
  }
  .icons-list >>> .anticon {
    margin-right: 8px;
    font-size: 16px;
  }
  .ant-advanced-search-form {
    padding: 24px;
    background: #fbfbfb;
  }

  .ant-advanced-search-form .ant-form-item {
    display: flex;
  }

  .ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
  }

  #components-form-demo-advanced-search .ant-form {
    max-width: none;
  }
  #components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
  /* .crm-btn {
                margin-left: 10px;
                margin-bottom: 10px;
              } */
</style>
